<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import { PropType, watch, defineExpose } from 'vue';
import type { Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
const props = defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
	loading: Boolean,
	current: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
	previous: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
	growthRate: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
	deviser: {
		type: String as PropType<string>,
		default: 'aqi',
	},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
	() => props.loading,
	() => {
		if (props.loading) {
			return;
		}
		setOptions({
			grid: { left: '10', bottom: '10', right: '20', top: '30', containLabel: true },
			tooltip: {
				trigger: 'axis',
			},
			toolbox: {
				feature: {
					saveAsImage: {
						pixelRatio: 2,
					},
				},
				top: 0,
				left: 0,
			},
			legend: { show: true },
			xAxis: {
				show: true,
				type: 'category',
				data: props.current.map((_, index) => index + 1),
				axisLabel: { show: true, color: '#9b9c9c' },
				axisLine: { show: true, lineStyle: { color: '#9b9c9c', type: 'dotted' } },
				axisTick: { show: true, alignWithLabel: true },
				splitLine: { show: true, interval: 1, lineStyle: { color: '#eeeeee', type: 'dashed' } },
			},
			yAxis: [
				{
					show: true,
					type: 'value',
					axisLabel: { show: true, showMinLabel: false, showMaxLabel: false, color: '#9b9c9c' },
					axisLine: { show: true, lineStyle: { color: '#9b9c9c', type: 'dotted' } },
					axisTick: { show: false },
					splitLine: { show: true, lineStyle: { color: '#eeeeee', type: 'dashed' } },
					min: function (v) {
						return (v.min * 0.8).toFixed(2);
					},
					max: function (v) {
						return (v.max * 1.2).toFixed(2);
					},
				},
				{
					type: 'value',
					name: '增长率',
					show: true,
					axisLabel: { show: true, showMinLabel: false, showMaxLabel: false, color: '#9b9c9c', formatter: '{value} %' },
					axisLine: { show: true, lineStyle: { color: '#9b9c9c', type: 'dotted' } },
					axisTick: { show: false },
					splitLine: { show: true, lineStyle: { color: '#eeeeee', type: 'dashed' } },
					// min: function (v) {
					// 	return (v.min * 0.8).toFixed(2);
					// },
					// max: function (v) {
					// 	return (v.max * 1.2).toFixed(2);
					// },
				},
			],
			series: [
				{
					data: props.current.map((d) => {
						return d[props.deviser];
					}),
					name: '本期',
					type: 'bar',
				},
				{
					data: props.previous.map((d) => {
						return d[props.deviser];
					}),
					name: '上期',
					type: 'bar',
				},
				{
					data: props.growthRate.map((d) => {
						return d[props.deviser];
					}),
					name: '增长率',
					connectNulls: false,
					type: 'line',
					smooth: true,
					symbol: 'circle',
					symbolSize: [12, 12],
					showSymbol: false,
					tooltip: {
						valueFormatter: function (value) {
							return Number(value)?.toFixed(2) + ' %';
						},
					},
					yAxisIndex: 1,
					lineStyle: { width: 2 },
				},
			],
		});
		nextTick(() => {
			resize();
		});
	},
	{ immediate: true }
);
onMounted(() => {
	resize();
});
defineExpose({
	resize,
});
</script>

<style lang="scss" scoped></style>
